{% extends "administrative/base.html" %}

{% block page_link %}
{#    <script src="../../static/administrative/js/todo_document.js"></script>#}
    <link rel="stylesheet" href="../../static/administrative/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        td{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="addressee_to_do.html" style="color: #0b0b0b;">
                <i class="iconfont icon-daiban"></i>
                <span> 待办公文</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 95%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                <thead>
                    <tr>
                        <th scope="col" style="width: 20%;">来文单位</th>
                        <th scope="col" style="width: 10%;">文号</th>
                        <th scope="col" style="width: 10%;">密级程度</th>
                        <th scope="col" style="width: 8%;">份数</th>
                        <th scope="col" style="width: 8%;">状态</th>
                        <th scope="col" style="width: 8%;">办理人</th>
                        <th scope="col" style="width: 8%;">操作</th>
                    </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table"></tbody>
            </table>
            <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                <div style="margin-top: 10%;">
                    <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                    <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                </div>
            </div>
        </div>
        <div style="width: 100%;border: #cfcfcf solid 0.5px;"></div>
        <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("administrative").className = "add-nav-active";
            document.getElementById("todo-document").className = "add_class";
            {#document.getElementById("dispatch-Administrator").style.display = "none";#}
            document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
            station_list();
        };

        function click_ul() {
            if (document.getElementById("jiantou").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
                document.getElementById("organizational_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou").className = "iconfont icon-jiantou-shang";
                document.getElementById("organizational_management_ul").style.display = "none";
            }
        }

        function click_ul1() {
            if (document.getElementById("jiantou1").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-xia";
                document.getElementById("gebruikersrol_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-shang";
                document.getElementById("gebruikersrol_ul").style.display = "none";
            }
        }

        function click_ul2() {
            if (document.getElementById("jiantou2").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
                document.getElementById("meeting_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-shang";
                document.getElementById("meeting_management_ul").style.display = "none";
            }
        }

        function click_ul3() {
            if (document.getElementById("jiantou3").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-xia";
                document.getElementById("issue_approval_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-shang";
                document.getElementById("issue_approval_ul").style.display = "none";
            }
        }

        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }


        // 加载待办列表
        function station_list(page=1) {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/addressee_to_do.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("page="+String(page));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        create_table(JsonDate["count_num"], JsonDate["data"]);
                        pagenum(JsonDate["count_num"], page);
                        document.getElementById("loading").style.display = "none";
                    }
                }
            };
        }

        function create_table(count_num, json_data) {
            var t_table = document.getElementById("t_table");
            deltr();
            if (json_data.length === 0){
                document.getElementById("img-display").style.display = "inline-block";
            }else {
                document.getElementById("img-display").style.display = "none";
            }
            for (var i=0; i<json_data.length; i++) {
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");var td6 = document.createElement("td");

                td.innerHTML = json_data[i]["Jeremy_levin_unit"];td.title = json_data[i]["Jeremy_levin_unit"];td.style.textAlign = "center";
                td2.innerHTML = json_data[i]["the_Titanic"];td2.title = json_data[i]["the_Titanic"];td2.style.textAlign = "center";
                td3.innerHTML = json_data[i]["confidentiality_level"];td3.title = json_data[i]["confidentiality_level"];td3.style.textAlign = "center";
                td4.innerHTML = json_data[i]["file_attachments"];td4.title = json_data[i]["file_attachments"];td4.style.textAlign = "center";
                td5.innerHTML = json_data[i]["status"];td5.title = json_data[i]["status"];td5.style.textAlign = "center";td5.style.color = "red";
                td1.innerHTML = json_data[i]["shenpi_str"];td1.title = json_data[i]["shenpi_str"];
                td6.innerHTML = "<a href='/administrative/addressee_examine.html?approve=ture&id="+json_data[i]["id"]+"' style='color: red;'>审批</a>";td6.title = "审批";td6.style.textAlign = "center";
                tr.appendChild(td);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td1);tr.appendChild(td6);
                t_table.appendChild(tr);
            }

        }

        // 删除列表
        function deltr(){
            var tb = document.getElementById('t_table');
            var rowNum=tb.rows.length;
            for (i=0;i<rowNum;i++) {
                tb.deleteRow(i);
                rowNum=rowNum-1;
                i=i-1;
            }
        }


        function pagenum(dataTotals=0, page=1) {
            new myPagination({
                id: 'pagination',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal:  Math.ceil(parseInt(dataTotals, 10)/20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag:true, //是否显示数据统计
                showSkipInputFlag:true, //是否支持跳转
                getPage: function (page) {
                    station_list(sent_str='', page);
                    document.getElementById("check_all").checked = false;
                }
            });
        }


    </script>
{% endblock %}
